<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="Collapse">

        <el-submenu :index="item.path_name" v-for="(item) in perms" :key="item.id">

          <template slot="title">
            <router-link :to="{name:item.path_name}" tag="p">
            <i :class="item.icon"></i>
              <span slot="">{{item.title}}</span>
            </router-link>
          </template>
          <el-menu-item-group v-if="item.subs.length !== 0">
            <el-menu-item index="1-2" v-for="(sitem) in item.subs" :key="sitem.id">
              <router-link :to="{name: sitem.path_name}" tag="p">
                <i :class="sitem.icon"></i>
                <span slot="">{{sitem.title}}</span>
              </router-link>

            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>


  </el-container>
</template>

<script>
import {mapMutations, mapState} from "vuex"

export default {
  name: "leftList",
  data(){
    return {
      perm : "",
      isCollapse: true
    }
  },
  methods:{
    ...mapMutations("index", ["setBread", "deletedBread"]),
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  computed:{
    perms(){
       return this.$store.state.login.perms
    },
    ...mapState("user", ["Collapse"])

  },
  watch:{

  },
  created() {
    console.log(this.Collapse)
  }


}
</script>

<style scoped lang="less">

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>